UseGlobal to display dialog

A dialog is a component with an "open/closed" state.

Usually, the state is updated from "components that have no parent-child relationship with dialogs," such as menus.

How to do this.

Proposal 1:.

Common parent comport keeps state

Pass child components by props.

Orthodox approach, but I personally dislike it.

I don't agree with the style of passing setter to child components with props.

Proposal 2::

Dialog has state

code:FooDialog.tsx

const FooDialog = () => {

...

}

As it is, the setter is trapped in the local scope, so we expose it.

code:FooDialog.tsx

export let openFooDialog: () => void;

const FooDialog = () => {

openFooDialog = () => {

setOpen(true);

}

...

}

I've been doing this until recently.

Proposal 3:.

Dialog useGlobal

code:FooDialog.tsx

export const FooDialog = () => {

const open = dialog === "Foo";

...

}

Instead of setting the "open" variable of "boolean" directly to "global", a variable has been introduced to mean "open dialog".

Implementation reflects the assumption that only one dialog is open at a time throughout the application.

Limit values by type to prevent typo, etc.

code:ts

const INITIAL_GLOBAL_STATE = {

...

dialog: null as "Foo" | null,

};

The open side is setGlobal.

code:ts

export const openFooDialog = () => {

setGlobal({ dialog: "Foo" });

};

I came up with this approach on 2021-03-22.

It will be clear where the defined dialog is to be displayed.

I'm still not sure what is best, but I thought it would be beneficial to record it at this time when there has been a change in policy, so I recorded it.

---